<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title th:text="${title}"></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background-color: rgb(224, 224, 224);
		}

		.background {
			position: absolute;
			width: 390px;
			height: 450px;
			background-color: white;
		}

		.background .head {
			position: relative;
			height: 10px;
			background-color: rgb(0, 153, 255);
		}

		.background .content .title,
		.text {
			position: relative;
			margin-top: 3%;
			margin-left: 5%;
			width: 90%;
		}

		.background .content .title {
			color: rgb(0, 153, 255);
			font-weight: 700;
			font-size: 24px;
		}

		.background .content .text {
			position: relative;
			padding: 8px;
			box-sizing: border-box;
			margin-top: 3%;
			margin-left: 5%;
			height: 290px;
			border: 1.5px rgb(0, 153, 255) solid;
			overflow: auto;
		}

		.background .content .text p {
			display: inline;
			border-bottom: 1px green dashed;
		}

		.background .miyako {
			position: absolute;
			bottom: 14px;
			right: 5%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 300px;
		}

		.background .miyako .from {
			position: relative;
			margin-right: 16px;
			font-size: 20px;
			font-weight: 600;
			color: rgb(0, 110, 255);
		}

		.background .miyako img {
			position: relative;
			width: 58px;
			height: 58px;
			border: 2px solid blueviolet;
			border-radius: 50%;
		}

		@media (max-width: 768px) {
			.background {
				width: 100%;
			}
		}
	</style>
</head>

<body>
	<div class="background">
		<div class="head"></div>
		<div class="content">
			<div class="title" th:text="${title}">标题</div>
			<div class="text">
				<p th:text="${content}">内容</p>
			</div>
		</div>
		<div class="miyako">
			<div class="from">From 出云宫子</div>
			<img src="https://s6.jpg.cm/2021/10/27/I07fQS.png" />
		</div>
	</div>
</body>

</html>